<template>
  <!-- 4.18 -->
  <div class="footswamplist">
    <van-sticky>
      <!-- 顶部 -->
      <div class="footswamptop">
        <div class="foottopleft">
          <div @click="$router.go(-1)" class="footswampbark"></div>
          <div class="footswamptitle animate__animated animate__rubberBand">
            {{ $route.query.title }}
          </div>
        </div>
        <div class="foottopright">
          <van-cell @click="showPopup">{{ qubutitle }}</van-cell
          ><span
            ><svg
              t="1637058875878"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2612"
              width="20"
              height="20"
            >
              <path
                d="M549.1 732.1L943.4 371c21.5-19.7 22.9-53 3.3-74.4-19.7-21.5-53-22.9-74.4-3.3L513.5 621.9 153.7 293.6c-21.5-19.6-54.8-18.1-74.4 3.4-19.6 21.5-18.1 54.8 3.4 74.4l394.9 360.5c0.8 0.7 1.7 1.5 2.5 2.1 19.9 16.4 49.4 16.1 69-1.9z"
                fill=""
                p-id="2613"
              ></path></svg
          ></span>
          <van-popup
            v-model="show"
            position="top"
            :style="{
              height: `${
                ((feileilist == null ? list : feileilist).sub_category_count +
                  1) *
                6
              }%`,
            }"
          >
            <ul class="foottoprightlist">
              <li
                @click="
                  qubutitle = '全部';
                  show = false;
                "
              >
                全部
              </li>
              <li
                v-for="i in (feileilist == null ? list : feileilist)
                  .sub_categories"
                :key="i.id"
                @click="
                  qubutitle = i.name;
                  show = false;
                "
              >
                {{ i.name }}
              </li>
            </ul>
          </van-popup>
        </div>
      </div>
    </van-sticky>
    <!-- 营养素排序 -->
    <van-cell @click="shows = true">
      <div class="neixunakan">
        <div>
          <span>{{ yingsupailist }}</span>
        </div>

        <div
          @click.stop="heilod = !heilod"
          v-if="yingsupailist !== '营养素排序'"
        >
          <span v-if="heilod === true"
            ><van-icon name="ascending" />由高到低</span
          >
          <span v-else><van-icon name="descending" />由低到高</span>
        </div>
      </div>
    </van-cell>

    <van-popup v-model="shows" position="bottom" :style="{ height: '30%' }">
      <ul class="compositionxiala">
        <CompositionItem
          v-for="item in compositionlist"
          :key="item.id"
          :item="item"
          @click.native="showlog(item)"
        />
      </ul>
    </van-popup>

    <!-- 主要内容 -->
    <van-list v-model="jiazai" :finished="finished" finished-text="没有更多了">
      <ul class="fodswamolists" ref="fooditem" v-if="loading">
        <FoodItem
          v-for="(items, index) in footlist"
          :key="index"
          :items="items"
        />
      </ul>
      <ul v-else>
        <li v-for="(items, index) in footlist" :key="index">
          <van-skeleton title :row="2" />
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
import FoodItem from "@/components/FoodItem.vue";
import CompositionItem from "@/components/CompositionItem.vue";

//引入lodash
var _ = require("lodash");
export default {
  components: {
    FoodItem,
    CompositionItem,
  },
  computed: {
    ...mapState(["feileilist"]),
  },
  data() {
    return {
      footlist: [],
      compositionlist: [],
      compositionfalg: false,
      show: false,
      shows: false,
      //滚动的值
      scroll: 0,
      //页数
      pagenum: 1,
      //顶部的弹出框 里的内容
      qubutitle: "全部",
      maxtitle: this.$route.query.maxtitle,
      num: "",
      //营养素排序
      yingsupailist: "营养素排序",
      yingsupailistindex: 1,
      list: null,
      //判断显示高低营养元素
      heilod: true,
      //过渡时间
      loading: false,
      jiazai: false,
      finished: false,
    };
  },

  created() {
    //主要内容
    this.axios
      .get(
        `https://food.boohee.com/fb/v1/foods?kind=${this.$route.query.maxtitle}&value=${this.$route.query.id}&page=${this.pagenum}&order_asc=0`
      )
      .then((res) => {
        this.footlist = res.data.foods;
        setTimeout(() => {
          this.loading = true;
        }, 1000);
      });
    //营养素排序
    this.axios
      .get(
        `https://food.boohee.com/fb/v1/foods/sort_types?User-Agent=food%2Fandroid&order_asc=0`
      )
      .then((res) => (this.compositionlist = res.data.types));
    this.list = JSON.parse(window.localStorage.getItem("list"));
  },
  //更新
  mounted() {
    window.addEventListener("scroll", this.menu);
  },
  //方法
  methods: {
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    showPopup() {
      this.show = true;
    },
    showlog(v) {
      this.yingsupailist = v.name;
      this.shows = false;
      this.yingsupailistindex = v.index;
    },
    ceshifandou: _.debounce(function () {
      this.pagenum += 1;
    }, 1000),
  },
  //监听
  watch: {
    //监听轮动
    scroll(n) {
      let max = this.footlist.length * 30;
      if (n > max) {
        this.ceshifandou();
      }
    },
    //监听页数
    pagenum(n) {
      if (n > 1 && this.qubutitle === "全部") {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&page=${n}&order_by=${this.yingsupailistindex}&order_asc=0`
          )
          .then((res) => this.footlist.push(...res.data.foods));
      }
      if (n > 1 && this.qubutitle !== "全部") {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&sub_value=${this.num}&order_by=${this.yingsupailistindex}&page=${n}&order_asc=0`
          )
          .then((res) => this.footlist.push(...res.data.foods));
      }
    },
    qubutitle(n) {
      this.pagenum = 1;
      (this.feileilist == null
        ? this.list
        : this.feileilist
      ).sub_categories.forEach((item) => {
        if (n === item.name) {
          this.num = item.id;
        }
      });

      if (this.num !== "") {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&sub_value=${this.num}&order_by=${this.yingsupailistindex}&page=${this.pagenum}&order_asc=0`
          )
          .then((res) => (this.footlist = res.data.foods));
      }

      if (n === "全部") {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&order_by=${this.yingsupailistindex}&page=${this.pagenum}&order_asc=0`
          )
          .then((res) => (this.footlist = res.data.foods));
      }
    },
    //监听营养素的index参数进行ajax数据获取
    yingsupailistindex(n) {
      this.axios
        .get(
          `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&sub_value=${this.num}&order_by=${n}&page=${this.pagenum}&order_asc=0`
        )
        .then((res) => (this.footlist = res.data.foods));
    },
    heilod(n) {
      if (n === true) {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&sub_value=${this.num}&order_by=${this.yingsupailistindex}&page=${this.pagenum}&order_asc=0`
          )
          .then((res) => (this.footlist = res.data.foods));
      } else {
        this.axios
          .get(
            `https://food.boohee.com/fb/v1/foods?kind=${this.maxtitle}&value=${this.$route.query.id}&sub_value=${this.num}&order_by=${this.yingsupailistindex}&page=${this.pagenum}&order_asc=1`
          )
          .then((res) => (this.footlist = res.data.foods));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.footswamplist {
  width: 100%;
  .footswamptop {
    width: 100%;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid gray;
    background: white;
    .foottopleft {
      display: flex;
      align-items: center;
      .footswampbark {
        width: 35px;
        height: 35px;
        background: url("../assets/image/ic_back_dark_center.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .footswamptitle {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .foottopright {
      display: flex;
      align-items: center;
      .van-cell {
        margin: 0;
        padding: 0;
        padding-right: 5px;
        span {
          padding-right: 5px;
        }
      }
      .foottoprightlist {
        text-align: center;
        li {
          padding: 10px 0;
        }
      }
    }
  }
  .neixunakan {
    display: flex;
    justify-content: space-between;
  }
  .footyinyansu {
    width: 100%;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    position: relative;
    .fontyinyansutitle {
      font-size: 15px;
    }
    .footyinyansuimg {
      width: 25px;
      transition: all 0.5s;
      &.active {
        transform: rotate(180deg);
      }
      img {
        vertical-align: middle;
        transform: rotate(0deg);
      }
    }
  }
  .compositionxiala {
    width: 100%;
    position: absolute;
    background: white;
    // height: 50vw;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      list-style: none;
      flex-basis: 33%;
      padding: 15px;
      text-align: center;
    }
  }
  //   .fodswamolists {
  //   }
}
</style>